<template>
  <div class="editInfo">
    <!-- path="/home/myInfo" 绑定定义一个变量 -->
    <hmNavBar
      :title="titleObj[type]"
      :path="path"
      rightText="保存"
      @clickRight="save"
    ></hmNavBar>
    <div class="content">
      <!-- 输入框 
      van-field
      label:左边标题
      v-model:双向绑定
      slot="left-icon(左边图标)/button(右边按钮)"         
      -->
      <!-- 根据type的不同显示输入框与上传组件-->
      <van-field v-if="type !== 'avatar'" class="field" v-model="fieldValue">
      </van-field>

      <!-- van-uploader -->
      <!-- 根据type的不同显示输入框与上传组件-->
      <van-uploader
        v-else
        v-model="fileList"
        :max-count="1"
        :before-read="beforeRead"
        :after-read="afterRead"
      >
      </van-uploader>
    </div>
  </div>
</template>

<script>
/* 导入mapState */
import { mapState } from 'vuex'
import { auEdit, upload } from '@/api/my.js'
export default {
  data () {
    return {
      fieldValue: '',
      /* 接收路由传参 */
      type: this.$route.query.type,
      /* 定义了一个标题的对象 */
      titleObj: {
        nickname: '修改昵称',
        intro: '修改用户简介',
        position: '修改岗位',
        avatar: '修改头像'
      },
      fileList: [], //上传图片
      path: '/home/myInfo' //回退地址
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  created () {
    // this.fieldValue = this.userInfo.nickname
    /* 修改前面写死的字段 */
    this.fieldValue = this.userInfo[this.type]
    /* 上传组件的图片回显功能 */
    /* 如果 type是avatar 
      如果userInfo.avatar有值  fileList=[{url:process.env.VUE_APP_URL+avatar地址}]
      如果userInfo.avatar无值  fileList=[]    
    */
    if (this.type === 'avatar') {
      if (this.userInfo.avatar) {
        this.fileList = [
          { url: process.env.VUE_APP_URL + this.userInfo.avatar }
        ]
      }
    }

    /* 如果修改我的岗位,就让path=我的页面 */
    if (this.type === 'position') {
      this.path = '/home/my'
    }
  },
  methods: {
    /* 点击保存完成编辑用户昵称 */
    async save () {
      /* 调用编辑api */
      // await auEdit({ nickname: this.fieldValue })
      await auEdit({ [this.type]: this.fieldValue })
      /* 提示一下 */
      this.$toast.success('编辑成功')
      /* 刷新数据 */
      /* 调用vuex的actions方法刷新用户信息 */
      this.$store.dispatch('refreshUserInfo')
      /* 跳转至/home/myInfo */
      /* 跳转到我的信息页面 */
      this.$router.push(this.path) //修改资料完成后的回退地址也做一个修改处理,使用path变量
    },
    /* 文件读取前 */
    beforeRead (file) {
      window.console.log(file)
      const isPng = file.type === 'image/png'
      const limit2M = file.size / 1024 / 1024 < 2
      if (!isPng) {
        this.$toast.fail('请上传png格式图片')
      }
      if (!limit2M) {
        this.$toast.fail('请上传2M内的文件')
      }
      return isPng && limit2M
    },

    /* 文件读取后 ,请取文件后,调用ajax*/
    async afterRead (file) {
      window.console.log('123', file)
      /* 执行上传  1.定义api  2.导入api  3.调用api */
      let _formData = new FormData()
      _formData.append('files', file.file)

      /*出现图片前loading */
      // this.$toast.loading({
      //       duration: 0,
      // message:"上传中"
      //     })
      //  duration:时长 0表示不消失
      //  this.$toast.clear() 消失

      this.$toast.loading({
        duration: 1
      })

      /* 需要定义upload 上传头像api */
      const res = await upload(_formData)
      window.console.log('上传成功', res)
      /* 调用编辑接口 将id赋值给fieldValue,因为编辑头像只需要ID*/
      this.fieldValue = res.data.data[0].id
    }
  }
}
</script>

<style lang="less" scoped>
.editInfo {
  .content {
    text-align: center;
    padding: 20px @p15;
  }
  .field {
    background-color: #f7f4f5;
  }
}
</style>
